<template>
	<view class="content">
		<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			width="100%" height="100%" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice">
			<defs>
				<linearGradient id="bg">
					<stop offset="0%" style="stop-color:rgba(130, 158, 249, 0.06)"></stop>
					<stop offset="50%" style="stop-color:rgba(76, 190, 255, 0.6)"></stop>
					<stop offset="100%" style="stop-color:rgba(115, 209, 72, 0.2)"></stop>
				</linearGradient>
				<path id="wave" fill="url(#bg)"
					d="M-363.852,502.589c0,0,236.988-41.997,505.475,0
		      s371.981,38.998,575.971,0s293.985-39.278,505.474,5.859s493.475,48.368,716.963-4.995v560.106H-363.852V502.589z" />
			</defs>
			<g>
				<use xlink:href='#wave' opacity=".3">
					<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="10s"
						calcMode="spline" values="270 230; -334 180; 270 230" keyTimes="0; .5; 1"
						keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
				</use>
				<use xlink:href='#wave' opacity=".6">
					<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="8s"
						calcMode="spline" values="-270 230;243 220;-270 230" keyTimes="0; .6; 1"
						keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
				</use>
				<use xlink:href='#wave' opacty=".9">
					<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="6s"
						calcMode="spline" values="0 230;-140 200;0 230" keyTimes="0; .4; 1"
						keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
				</use>
			</g>
		</svg>
		
		<view class="loginBox">
			<h3 style="text-align: center;margin-bottom:120rpx;">欢迎登录</h3>
			<view class="inputBox">
				<view class="ipt">
					<uni-icons type="contact" size="24" color="rgb(66,157,250)"></uni-icons>
					<input type="text" value="" placeholder="请输入账号"/>
				</view>
				<view class="ipt">
					<uni-icons type="eye" size="24" color="rgb(66,157,250)"></uni-icons>
					<input type="passsword" value="" placeholder="请输入密码"/>
				</view>
				<view class="ipt">
					<uni-icons type="checkmarkempty" size="24" color="rgb(66,157,250)"></uni-icons>
					<input type="text" value="" placeholder="请输入验证码"/>
					<view class="yzm">
						验证码
					</view>
				</view>
				<button>登录</button>
				<view class="forgetPwd">
					<span>忘记密码</span>
					<span>没有账号，去注册</span>
				</view>
			</view>
			<view class="tipbox">
				<view class="txt">
					—— 其他账号登录 ——
				</view>
				<view class="otherUser">
					<uni-icons type="qq" size="40" color="rgb(66,157,250)"></uni-icons>
					<uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	svg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height:40%;
		box-sizing: border-box;
		display: block;
		background-color: #ffffff;
	}
	
	.loginBox{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-60%);
		width: 90%;
		border-radius: 20rpx;
		padding: 60rpx;
		box-sizing: border-box;
	}
	h3{
		color:rgb(66,157,250);
		font-size: 40rpx;
		letter-spacing: 10rpx;
		margin-bottom: 40rpx;
	}
	.inputBox{
		
	}
	.ipt{
		height: 86rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 40rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		padding-left: 10rpx;
	}
	.ipt input{
		margin-left: 20rpx;
		font-size: 28rpx;
	}
	.ipt input{
		margin-left: 20rpx;
	}
	.forgetPwd{
		margin-top: 30rpx;
		font-size: 26rpx;
		color: #b5b5b5;
		text-align: end;
		padding:0 10rpx;
		display: flex;
		justify-content: space-between;
	}
	button{
		margin-top: 20rpx;
		line-height: 85rpx;
		text-align: center;
		background: rgb(66,157,250);
		border-radius: 40rpx;
		color: #fff;
		margin-top: 40rpx;
	}
	
	.tip{
		text-align: center;
		font-size: 28rpx;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #f4f4f4;
	}
	.tipbox {
		text-align: center;
		margin-top: 100rpx;
	}
	
	.otherUser {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
	}
	
	.txt {
		font-size: 28rpx;
		color: #cbcbcb;
	}
	
	.otherUser .uni-icons {
		margin-left: 20rpx;
	}
	.yzm{
		text-align: end;
		font-size: 24rpx;
		background: linear-gradient(to right,rgb(66,157,250),rgb(0, 170, 127));
		height: 60rpx;
		width: 150rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
	}
</style>